<template>
    <div :ref="refName"></div>
</template>

<script>
import { nanchang } from '@/assets/map/nanchang'
import theme from "@/assets/theme/chalk"
export default {
    components: {},
    props: {
        config: {
            type: Object,
            default: () => { }
        },
        isMap: {
            type: Boolean,
            defaule: false
        },
        className: {
            type: String,
            default: 'chart'
        },
        // 图表宽度
        width: {
            type: String,
            require: true
        },
        // 图表高度
        height: {
            type: String,
            require: true
        },
        refName: {
            type: String,
            require: true
        }
    },
    data() {
        return {
            echartInstance: null
        }
    },
    computed: {},
    watch: {
        config: {
            handler(newVlaue, oldVlaue) {

                newVlaue && this.changeConfig(newVlaue)
            },
            // immediate: true,
            deep: true
        }
    },
    mounted() {
        this.$refs[this.refName].style.width = this.width
        this.$refs[this.refName].style.height = this.height
        //注册主题
        this.$echarts.registerTheme('myTheme', theme) // 覆盖默认主题
        this.echartInstance = this.$echarts.init(this.$refs[this.refName], "myTheme")
        //存在则显示地图
        if (this.isMap) {
            this.$echarts.registerMap("nanchang", nanchang)
        }
        this.changeConfig()
        this.echartInstance.on("click", (params) => {
            let componentType = params.componentType;   // geo是地图图层
            console.log(componentType);
            if (componentType == "geo") {
                let offsetX = params.event.offsetX;
                let offsetY = params.event.offsetY;
                let zuobiao = this.echartInstance.convertFromPixel('geo', [offsetX, offsetY]); // 转换成坐标
                console.log(zuobiao);
            }

        })
    },
    methods: {
        changeConfig(data, clearCaching = false) {
             
            if (data || this.config) {
                this.echartInstance.setOption(data || this.config, clearCaching)
            }
        },
        getData() {
            //暴露实例对象
            return this.echartInstance
        }
    }
}
</script>

<style scoped lang="less" scoped>

</style>
